<template>
	<view class="addImage">
		<view class="fa_header">
			<uni-icons type="left" size="25" @tap="back()"></uni-icons>
			<view class="u_tabs flex-box">
				<u-tabs lineColor="#252525" :activeStyle="{ color: '#252525', fontWeight: '600'}" :list="tabsList"
					@click="tabClick">
				</u-tabs>
			</view>
		</view>
		<view class="fa_content">
			<view class="fa_content_box">
				<view class="one">
					<view class="one-left">
						<view class="border">
							<uni-icons type="plusempty" size="25" color="#ffffff"></uni-icons>
						</view>
						<view class="text">
							发布到
						</view>
					</view>
					<view class="dution" @click="typeShow = true">
						<span style="margin-left: 10rpx;">{{title}}</span>
						<uni-icons type="forward" size="25" color="#252525"></uni-icons>
					</view>
				</view>
				<u-divider lineColor="#252525" style="margin-top: 0;"></u-divider>
				<view style="width: 85%;border-bottom: 1rpx solid #252525;padding:20rpx ;margin-bottom: 10rpx;"
					:class="type ==2?'die':''">
					<u-input v-model="FormData.introduce" placeholder="请输入标题" border="none">
					</u-input>
				</view>
				<view class="two" style="height: 400rpx;width: 85%;" :class="type ==2?'big':''">
					<u--textarea v-model="FormData.details" placeholder="分享你此刻的想法..." border="none"></u--textarea>
				</view>
				<view class="three" v-if="index==0&&type!=2">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="9"></u-upload>
					<view class="three-text" :class="isShow?'die':''">
						<span>发布图片,第一张为封面图</span>
						<span>请不要发布无关图片与违规图片</span>
					</view>
				</view>
				<view class="three" v-if="index==1&&type!=2">
					<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple
						:maxCount="1"></u-upload>
					<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
						:maxCount="1" accept="video"></u-upload>
					<view class="three-text">
						<span>第一个为上传封面图</span>
						<span>请不要发布违规封面图与违规视频</span>
					</view>
				</view>
				<view class="four-father">
					<view class="four">
						<view class="" style="    display: flex;
					    flex-direction: row;
					    align-items: center;
						color:#252525
					">
							<uni-icons type="eye" size="25" color="#252525"></uni-icons>
							谁可以看
						</view>
						<view @tap="lookShow=true" class="" style="    display: flex;
					    flex-direction: row;
					    align-items: center;
					">
							{{ eye }}
							<uni-icons type="forward" size="25" color="#252525"></uni-icons>
						</view>
					</view>
				</view>
				<view class="four-father">
					<view class="four">
						<view class="" style="display: flex;
					    flex-direction: row;
					    align-items: center;
						color:#252525
					">
							<uni-icons type="location" size="25" color="#252525"></uni-icons>
							选择地址
						</view>
						<view @tap="cityShow = true;" class="" style="    display: flex;
					    flex-direction: row;
					    align-items: center;
					">
							{{ address }}
							<uni-icons type="forward" size="25" color="#252525"></uni-icons>
						</view>
					</view>
				</view>
				<view class="four-father">
					<button size="default" type="default" style="width: 100%;" @tap="submit">{{fabu}}</button>
				</view>
			</view>

		</view>
		<u-action-sheet :actions="typelist" :show="typeShow" @select="selectClick" title="选择板块"
			@close="typeShow = false"></u-action-sheet>
		<u-picker :show="cityShow" ref="uPicker" :columns="cityList" @confirm="confirm" @change="changeHandler"
			@cancel="cityShow = false"></u-picker>
		<u-picker :show="lookShow" :columns="lookList" @confirm="lookConfirm" keyName="name"
			@cancel="lookShow = false"></u-picker>
	</view>
</template>

<script>
	import {
		releaseContent,updateContent
	} from '@/api/index.js'
	import {
		getLoveId
	} from '@/api/my.js'
	import cityData from '@/utlis/city.js'
	import {
		upDateFile
	} from '@/api/common.js'
	export default {
		data() {
			return {
				type: 0,
				FormData: {
					id:'',
					type: '',
					introduce: '',
					details: '',
					picture: '',
					show: '0',
					is_ip: 0,
					is_sign: 1,
					ip: '',
					video_cover: '',
					other_id: '',
				},
				typeShow: false,
				lookShow: false,
				isShow: false,
				index: 0,
				tabsList: [{
					name: '图文',
				}, {
					name: '视频',
				}, {
					name: '文字',
				}],
				title: "选择合适的板块会有更多的赞",
				fileList1: [],
				fileList2: [],
				fileList3: [],
				eye: '公开',
				address: '请选择',
				typelist: [{
						name: '发布分享版',
						value: 0
					},
					{
						name: '发布永久版',
						value: 1
					},
					{
						name: '发布誓言版',
						value: 2
					},
				],
				fabu:'发布',
				cityShow: false,
				cityList: [],
				cityLevel1: [],
				cityLevel2: [],
				cityLevel3: [],
				love_id: '',
				guimi_id: '',
				lookList: [
					[{
							name: '公开',
							disabled: '0'
						},
						{
							name: '自己可见',
							disabled: '1'
						},
						{
							name: '不给关注用户',
							disabled: '2'
						}, {
							name: '全不可见',
							disabled: '3'
						}, {
							name: '仅情侣可见',
							disabled: '4'
						}, {
							name: '仅闺蜜可见',
							disabled: '5'
						}
					]
				],
				update:false,
			}
		},
		watch: {
			fileList1(newVal) {
				console.log(newVal.length, '-------------------');
				if (newVal.length > 0) {
					this.isShow = true;
				} else {
					this.isShow = false;
				}
			}
		},
		onLoad(options) {
			let data = JSON.parse(options.data)
			if (data) {
				this.FormData.introduce = data.introduce
				this.FormData.details = data.details
				this.FormData.type = data.type
				this.FormData.id = data.id
				this.fabu = '修改'
				switch (this.FormData.type) {
					case 0:
						this.title = '发布分享版'
						break;
					case 1:
						this.title = '发布永久版'
						break;
					case 2:
						this.title = '发布誓言版'
						break;
				}
				this.update = true
			}
			this.initCityData();
			this.getLoveIds()
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			//获取我的情侣或者闺蜜的user_id
			async getLoveIds() {
				const res = await getLoveId().then(res => {
					this.love_id = res.data.love_id
					this.guimi_id = res.data.guimi_id
					console.log(this.fireList, '我的情侣或者闺蜜的user_id');
				});
			},
			lookConfirm(e) {
				console.log(e, '23132132131');
				this.FormData.show = e.value[0].disabled
				this.eye = e.value[0].name
				this.lookShow = false
			},
			confirm(e) {
				// 输出数组 [省, 市, 区]
				console.log(e.value);
				this.FormData.ip = e.value[0] + '/' +
					e.value[1] + '/' +
					e.value[2]
				// 隐藏城市选择器
				this.address = this.FormData.ip
				this.cityShow = false;
			},
			changeHandler(e) {
				const {
					columnIndex,
					index,
					indexs,
					value,
					values,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) { // 选择第一列数据时
					// 设置第二列关联数据
					picker.setColumnValues(1, this.cityLevel2[index]);
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
				} else if (columnIndex === 1) { // 选择第二列数据时
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
				}
			},
			initCityData() {
				// 遍历城市js
				cityData.forEach((item1, index1) => {
					let temp2 = [];
					this.cityLevel1.push(item1.provinceName);

					let temp4 = [];
					let temp3 = [];
					// 遍历市
					item1.cities.forEach((item2, index2) => {
						temp2.push(item2.cityName);
						// 遍历区
						item2.counties.forEach((item3, index3) => {
							temp3.push(item3.countyName);
						})
						temp4[index2] = temp3;
						temp3 = [];
					})
					this.cityLevel3[index1] = temp4;

					this.cityLevel2[index1] = temp2;
				})
				// 选择器默认城市
				this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
			},
			submit() {
				console.log(this.FormData.type);
				if (!this.FormData.type) {
					if (this.FormData.type != 0) {
						uni.showToast({
							duration: 1500,
							title: '请选择板块',
							icon: 'none'
						})
						return
					}

				}
				this.FormData.video_cover = ""
				this.FormData.picture = ""
				if (this.type != 2 && this.index == 0) {
					this.getPicture()
				}
				if (this.type != 2) {
					if (!this.FormData.introduce) {
						uni.showToast({
							duration: 1500,
							title: '请输入标题',
							icon: 'none'
						})
						return
					}
				}
				if (!this.FormData.details) {
					uni.showToast({
						duration: 1500,
						title: '请输入内容',
						icon: 'none'
					})
					return
				}
				if (!this.FormData.ip) {
					uni.showToast({
						duration: 1500,
						title: '请选择地址',
						icon: 'none'
					})
					return
				}
				this.FormData.video = ""
				if (this.type != 2 && this.index == 1) {

					this.getvideo()
					if (!this.FormData.video) {
						uni.showToast({
							duration: 1500,
							title: '请上传视频',
							icon: 'none'
						})
						return
					}
					if (!this.FormData.video_cover) {
						uni.showToast({
							duration: 1500,
							title: '请上传封面图',
							icon: 'none'
						})
						return
					}
				}
				if (this.FormData.show == "4") {
					this.FormData.other_id = this.love_id
				}
				if (this.FormData.show == "5") {
					this.FormData.other_id = this.guimi_id
				}
				console.log(this.FormData);
				if(this.update){
					updateContent({
						...this.FormData
					}).then(res => {
						console.log('res', res);
						if (res.code == 1) {
							uni.showToast({
								'icon': 'none',
								'title': res.msg,
								'duration': 2000
							})
							setTimeout(() => {
								// uni.navigateBack()
							}, 2000);
						}
					})
				}else{
					releaseContent({
						...this.FormData
					}).then(res => {
						console.log('res', res);
						if (res.code == 1) {
							uni.showToast({
								'icon': 'none',
								'title': res.msg,
								'duration': 2000
							})
							setTimeout(() => {
								// uni.navigateBack()
							}, 2000);
						}
					})
				}
			},
			getvideo() {
				let url = []
				this.fileList3.forEach(item => {
					const path = item.url.split('/').slice(3).join('/');
					console.log(path, '99898989');
					url.push('/' + path);
				});
				this.FormData.video = url[0];
				let coverurl = []
				this.fileList2.forEach(item => {
					const path = item.url.split('/').slice(3).join('/');
					coverurl.push('/' + path);
				});
				this.FormData.video_cover = coverurl[0];
			},
			getPicture() {
				let url = []
				this.fileList1.forEach(item => {
					const path = item.url.split('/').slice(3).join('/');
					console.log(path, '99898989');
					url.push('/' + path);
				});
				this.FormData.picture = url.join(",");
				this.FormData.video_cover = url[0]
			},
			selectClick(index) {
				console.log(index)
				this.title = index.name
				this.FormData.type = index.value
				this.type = index.value

			},
			tabClick(item) {
				console.log('选择标签', item);
				this.index = item.index
				if (item.index == 2) {
					this.typelist = [{
						name: '发布誓言版',
						value: 2
					}, ]
					this.title = '发布誓言版',
						this.type = 2
					this.FormData.type = 2
				} else {
					this.typelist = [{
							name: '发布分享版',
							value: 0
						},
						{
							name: '发布永久版',
							value: 1
						},
						{
							name: '发布誓言版',
							value: 2
						},
					]
				}
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})

				for (let i = 0; i < lists.length; i++) {
					const result = await upDateFile(lists[i].url)
					console.log(result);
					let item = this[`fileList${event.name}`][fileListLen]
					console.log('测试', result);
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.data.fullurl
					}))
					fileListLen++
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.addImage {
		background-color: #f6f6f6;
		height: 100vh;
	}

	.fa_header {
		display: flex;
		align-items: center;
		padding-top: 80rpx;
	}

	.u_tabs {
		font-size: 20rpx;
	}

	.fa_content {
		min-height: 55%;
		background-color: #ffffff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		display: flex;
		justify-content: center;
		margin-top: 10rpx;

		.fa_content_box {
			// width: 85%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			.one {
				width: 85%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				// padding-top: 20rpx;
				// background-color: #f6f6f6;
				height: 100rpx;

				// border-bottom: 1rpx solid #252525;
				.one-left {
					display: flex;
					flex-direction: row;
					align-items: center;

					.border {
						width: 60rpx;
						height: 60rpx;
						background-color: #252525;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 10rpx;
					}
				}


				.text {
					color: #252525;
					font-size: 35rpx;
					margin-left: 5rpx;
				}

				.dution {
					box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.5);
					/* Shadow effect */
					height: 100%;
					width: 69%;
					// color: #252525;
					font-size: 30rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}

		}

	}

	.three {
		width: 85%;
		display: flex;
		align-items: center;
	}

	.three-text {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.four-father {
		background-color: #f6f6f6;
		height: 100rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10rpx;
	}

	.four {
		width: 85%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.die {
		display: none !important;
	}

	.big {
		height: 500rpx;
	}
</style>